<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-20">
      <div slot="header" class="clearfix">
        <span>开标准备</span>
        <div class="float-right">
          <el-button type="primary" icon="el-icon-edit">变更时间 </el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="dialogVisible2 = true"
            >流标
          </el-button>
          <el-button type="success" icon="el-icon-check" @click="handleComplete"
            >完成
          </el-button>
          <el-button type="info" icon="el-icon-back" @click="$router.go(-1)"
            >返回
          </el-button>
        </div>
      </div>

      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :md="8">
            <el-form-item label="活动名称：">
              {{ form.name }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="报名截止时间：">
              {{ form.end_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="招标编号：">
              {{ form.code }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="投标截止时间：">
              {{ form.last_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="采购单位：">
              {{ form.company }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="开标时间：">
              {{ form.start_time }}
            </el-form-item>
          </el-col>
          <el-col :md="8">
            <el-form-item label="招标方式：">
              {{ form.way }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-steps :active="steps" simple finish-status="success" class="mb-20">
      <el-step title="招标"></el-step>
      <el-step title="投标"></el-step>
      <el-step title="开标"></el-step>
      <el-step title="评标"></el-step>
      <el-step title="定标"></el-step>
      <el-step title="公示"></el-step>
    </el-steps>

    <el-tabs v-model="activeName">
      <el-tab-pane name="1" label="供应商"></el-tab-pane>
      <el-tab-pane name="2" label="评标专家"></el-tab-pane>
    </el-tabs>

    <el-table
      :data="lists"
      border
      highlight-current-row
      class="mb-20"
      v-if="activeName == 1"
    >
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="供应商名称" prop="name"></el-table-column>
      <el-table-column label="联系人" prop="contracter"></el-table-column>
      <el-table-column label="手机号" prop="mobile"></el-table-column>
      <el-table-column label="报价时间" prop="offer_time"></el-table-column>
      <el-table-column label="报价IP" prop="offer_IP"></el-table-column>
      <el-table-column label="签到状态" prop="sign_status"></el-table-column>
      <el-table-column label="解密状态" prop="scret_status"></el-table-column>
      <el-table-column label="操作">
        <el-button type="text">解密</el-button>
      </el-table-column>
    </el-table>

    <el-table :data="lists1" border highlight-current-row v-else>
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column label="专家姓名" prop="name"></el-table-column>
      <el-table-column label="项目类型" prop="type"></el-table-column>
      <el-table-column label="专业" prop="major"></el-table-column>
      <el-table-column label="职级" prop="rank"></el-table-column>
      <el-table-column label="手机号" prop="mobile"></el-table-column>
      <el-table-column label="签到状态" prop="sign_status"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" icon="el-icon-plus" plain size="small"
            >添加专家
          </el-button>
        </template>
        <template>
          <el-button type="text">设置组长</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "招标名称",
        end_time: "2020-03-01  14:59:59",
        code: "XJD-998376241",
        last_time: "--",
        company: "北京国电龙源环保工程有限公司",
        start_time: "2020-12-31 12:00:00",
        way: "公开招标"
      },
      steps: 2,
      activeName: "1",
      lists: [
        {
          name: "供应商名称1",
          contracter: "联系人1",
          mobile: "12345678951",
          offer_time: "2020-12-12",
          offer_IP: "172.231.31.256",
          sign_status: "已签到",
          scret_status: "未解密"
        },
        {
          name: "供应商名称2",
          contracter: "联系人1",
          mobile: "12345678951",
          offer_time: "2020-12-12",
          offer_IP: "172.231.31.256",
          sign_status: "已签到",
          scret_status: "未解密"
        },
        {
          name: "供应商名称3",
          contracter: "联系人1",
          mobile: "12345678951",
          offer_time: "2020-12-12",
          offer_IP: "172.231.31.256",
          sign_status: "已签到",
          scret_status: "未解密"
        }
      ],
      lists1: [
        {
          name: "张小刚",
          type: "类型1",
          major: "专业1",
          rank: "职级1",
          mobile: "12345678951",
          sign_status: "已签到"
        },
        {
          name: "张小刚",
          type: "类型1",
          major: "专业1",
          rank: "职级1",
          mobile: "12345678951",
          sign_status: "未签到"
        },
        {
          name: "张小刚",
          type: "类型1",
          major: "专业1",
          rank: "职级1",
          mobile: "12345678951",
          sign_status: "已签到"
        },
        {
          name: "张小刚",
          type: "类型1",
          major: "专业1",
          rank: "职级1",
          mobile: "12345678951",
          sign_status: "已签到"
        }
      ]
    };
  },
  methods: {
    handleComplete() {
      this.$alert("供应商报价少于3家弹框提示是否继续开标？", "系统提示", {
        confirmButtonText: "确定",
        callback: action => {
          this.$message({
            type: "success",
            message: `开标完成，系统将调用大华接口开启现场监控！`
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
